<route lang="json5">
{
  style: {
    navigationBarTitleText: '点单服务',
  },
}
</route>

<template>
  <view class="common-tab-list-wrap">
    <wd-tabs
      v-model="tab"
      custom-class="common-header-tabs"
      @change="changeTab"
    >
      <block
        v-for="(item, index) in tabList"
        :key="index"
      >
        <wd-tab
          :title="item.label"
          :name="item.value"
        ></wd-tab>
      </block>
    </wd-tabs>
    <view class="content">
      <scroll-view
        scroll-y
        class="scroll-view flex-1"
        refresher-enabled
        enable-back-to-top
        :refresher-triggered="refresherTriggered"
        @refresherrefresh="onRefresherrefresh"
        @scrolltolower="getDataList"
      >
        <view class="data-list">
          <template v-if="dataList.length">
            <view
              v-for="item in dataList"
              :key="item.id"
              class="data-item"
            >
              <view class="data-item-image common-image-corner">
                <image
                  class="img"
                  :src="formatUrlString(item.coverUrl)[0]"
                  mode="aspectFill"
                />
              </view>
              <view class="flex justify-between">
                <view>
                  <view class="data-item-title">{{ item.name }}</view>
                  <view class="data-item-tip">
                    {{ item.sysOrgCode_dictText }}
                  </view>
                </view>
                <view
                  class="text-right"
                  v-if="showBookingBtn(item.endDate)"
                >
                  <view class="data-item-tip mb-sm">
                    剩余场次：{{ item.times - item.realTimes }}
                  </view>
                  <!-- <wd-button
                    size="small"
                    @click="uniNavigateTo(`/pages-sub/order-serve/booking/index?id=${item.id}`)"
                  >
                    去预约
                  </wd-button> -->
                  <JudgePermission action="hall:hall_order_subscribe:add">
                    <wd-button
                      size="small"
                      @click="
                        uniNavigateTo(
                          `/pages-sub/order-serve/booking/index?id=${item.id}`,
                        )
                      "
                    >
                      去预约
                    </wd-button>
                  </JudgePermission>
                </view>
                <view
                  v-else
                  class="data-item-tip"
                >
                  活动已结束
                </view>
              </view>
            </view>
          </template>
          <template v-else>
            <wd-status-tip
              image="content"
              tip="暂无内容"
            />
          </template>
        </view>
        <wd-loadmore
          v-if="dataList.length"
          finished-text="没有更多了"
          :state="loadState"
          @reload="getDataList"
        />
      </scroll-view>
    </view>
    <view
      class="add-btn"
      @click="uniNavigateTo(`/pages-sub/activity/add/index`)"
    >
      <wd-icon
        name="add"
        size="28px"
      ></wd-icon>
    </view>
  </view>
</template>

<script setup>
import JudgePermission from '@/components/JudgePermission.vue'
import { getOrderType } from '@/service/dict'
import OrderApi from '@/service/order'
import { currentPageNeedRefresh } from '@/utils'
import { formatUrlString, uniNavigateTo } from '@/utils/index'
import dayjs from 'dayjs'

const showBookingBtn = (endDate) => {
  const now = dayjs().format('YYYY-MM-DD')
  return dayjs(now).isBefore(dayjs(endDate))
}

const DEFAULT_TAB = {
  label: '当月推荐',
  value: 'recommend',
}

const tab = ref(DEFAULT_TAB.value)
const tabList = ref([DEFAULT_TAB])

const getTabList = async () => {
  const { code, result } = await getOrderType()
  if (code === 200 && result) {
    tabList.value = [...tabList.value, ...result]
  }
}

const changeTab = (event) => {
  tab.value = event.name
  refreshList()
}

const loadState = ref('loading')
const pageObj = ref({
  pageNo: 1,
  pageSize: 10,
})
const dataList = ref([])

const getDataList = async () => {
  if (loadState.value === 'finished') return
  try {
    console.log('tab.value', tab.value)
    let params = {}
    if (tab.value === DEFAULT_TAB.value) {
      const m = dayjs().month() + 1
      const y = dayjs().year()
      const mon = m < 10 ? `0${m}` : m
      const month = `${y}-${mon}`
      params = { ...pageObj.value, month, column: 'createTime', order: 'desc' }
    } else {
      params = {
        ...pageObj.value,
        type: tab.value,
        column: 'createTime',
        order: 'desc',
      }
    }
    console.log('params', params)
    const { code, result } = await OrderApi.getOrderList(params)
    if (code === 200 && result) {
      const { records, pages } = result
      if (records?.length) {
        dataList.value = [...dataList.value, ...records]
      }
      if (pageObj.value.pageNo < pages) {
        pageObj.value.pageNo++
      } else {
        loadState.value = 'finished'
      }
    } else {
      loadState.value = 'error'
    }
  } catch (e) {
    loadState.value = 'error'
  }
}

const reset = () => {
  pageObj.value.pageNo = 1
  dataList.value = []
  loadState.value = 'loading'
}

const refreshList = () => {
  reset()
  getDataList()
}

const refresherTriggered = ref(false)
const onRefresherrefresh = async () => {
  refresherTriggered.value = true
  // 重置分页数据，刷新接口
  reset()
  await getDataList()
  refresherTriggered.value = false
}

onLoad(() => {
  getTabList()
  refreshList()
})

onShow(() => {
  if (currentPageNeedRefresh()) {
    refreshList()
  }
})
</script>

<style lang="scss" scoped>
.order-serve {
  position: relative;
}

.scroll-view {
  position: relative;
  height: calc(100vh - 46px);
}

.data-list {
  padding: $uni-spacing-col-lg $uni-spacing-row-lg;

  .data-item {
    padding-bottom: $uni-spacing-col-lg;
    margin-bottom: $uni-spacing-col-lg;
    border-bottom: 1px solid $uni-border-color;

    &-image {
      margin-bottom: $uni-spacing-col-base;

      .img {
        height: 200px;
      }
    }

    &-title {
      margin-bottom: $uni-spacing-col-sm;
      font-weight: 600;
    }

    &-tip {
      font-size: $uni-font-size-base;
      color: $uni-text-color-grey;

      &.mb-sm {
        margin-bottom: $uni-spacing-col-sm;
      }
    }
  }
}

.add-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  color: $uni-text-color-inverse;
  text-align: center;
  background: $uni-color-primary;
  border-radius: 50%;
  box-shadow: $uni-shadow-sm;
}
</style>
